<template>
  <div>
    <div class="table">
      <el-table :data="tableData" show-overflow-tooltip style="width: 100%">
        <el-table-column fixed type="index" label="序号" width="70" />
        <el-table-column label="岗位紧急程度" fixed width="150" >
          <template v-slot="scope">
            <el-tag
              type="primary"
              size="large"
              :class="{
                'better-style': scope.row.requireEmergencyLevel == 2,
                'blue-style': scope.row.requireEmergencyLevel == 0,
                'yellow-style': scope.row.requireEmergencyLevel == 1,
              }"
              >{{
                scope.row.requireEmergencyLevel == 0
                  ? "一般"
                  : scope.row.requireEmergencyLevel == 1
                  ? "紧急"
                  : "非常紧急"
              }}</el-tag
            >
          </template>
        </el-table-column>
        <!-- 岗位编号 -->
        <el-table-column prop="jobcode" label="岗位编号" />
        <el-table-column prop="jobName" label="岗位名称" />
        <el-table-column prop="requireProposerName" label="需求申请人" />
        <el-table-column prop="requireDeptName" label="需求部门" />
        <el-table-column prop="requirePersonNumber" label="需求人数" />
        <el-table-column prop="hopeArrivalTime" label="希望到岗日期" />
        <el-table-column prop="closeTime" label="截止日期" />
        <el-table-column prop="proposeTime" label="申请日期" />
        <el-table-column label="岗位状态" v-if='postStatus'  width="100">
          <template v-slot="scope">
            <el-tag
              type="primary"
              size="small"
              :class="{
                'green-style': scope.row.jobStatus == 0,
                'gray-style': scope.row.jobStatus == 1,
              }"
              >{{
                scope.row.jobStatus == 0
                  ? "招聘中"
                  : scope.row.jobStatus == 1
                  ? "已关闭"
                  : ""
              }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作" width="250">
          <template #default="scope">
            <el-button

              class="other-btn"
              type="text"
              size="small"
              @click="handleInfo(scope.row)"
            >
              查看岗位
            </el-button>
            <el-button
              class="other-btn"
              type="text"
              size="small"
              @click="handleEdit(scope.row)"
              v-if="SecondAuth"
              >编辑岗位</el-button
            >
            <el-button
              v-if="scope.row.jobStatus == 0"
              class="del-button"
              type="text"
              size="small"
              @click="onConfirm(scope.row)"
              >关闭岗位</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <Pagination
      :total="pagination.total"
      :page="pagination.page"
      :limit="pagination.limit"
      :pageSizes="pagination.pageSizes"
      @handleSizeChange="sizeChange"
      @handleCurrentChange="currentChange"
    ></Pagination>
  </div>
</template>

<script setup>
import { ElButton, ElMessage } from "element-plus";
import Pagination from "@/components/Pagination/pageination.vue";

import { useRouter } from "vue-router";
const props = defineProps({
  isShowBtn: Boolean,
  tableData: Array,
  currentTabs: String,
  SecondAuth: Boolean,
  postStatus:Boolean,
  pagination: {
    type: Object,
    required: true,
    default: () => ({
      total: 10,
      page: 1,
      limit: 10,
      pageSizes: 10,
    }),
  },
});

const emit = defineEmits(["handleInfo", "sizeChange", "currentChange"]);

const router = useRouter();

// 查看
const handleInfo = (row) => {
  emit("handleInfo", row);
};

// 编辑
const handleEdit = (row) => {
  emit("handleEdit", row);
};

const onConfirm = (row) => {
  emit("onConfirm", row);
};
const sizeChange = (size) => {
  console.log(size, "size");
  emit("sizeChange", size);
};
const currentChange = (page) => {
  console.log(page, "1");
  emit("currentChange", page);
};
</script>

<style lang="scss" scoped>
// :deep(.el-table__header) {
//   height: 70px;
// }

.elTag {
  color: #fff;
  font-size: 13px;
  font-weight: 500;
}

.btn {
  font-size: 15px;
  margin: 0;
  padding: 0;
  margin-right: 10px;
}

.green-style {
  background: #eafaf0;
  color: #33d170;
  border: 1px solid #33d170;
  padding: 12px 8px;
}
.gray-style {
  background: #f1f2f4;
  color: #383d48;
  border: 1px solid #383d48;
  padding: 12px 8px;
}
</style>
